<route lang="json5">
{
  meta: {
    auth: true,
    label: '菜单管理',
  },
}
</route>

<template>
  <div class="h-full w-full">
    <a-split :default-size="0.9" min="80px" class="h-full">
      <template #first>
        <div class="h-full flex flex-col pr-2">
          <div class="flex items-center overflow-x-scroll">
            <a-button @click="handleOpenModal()" status="warning" class="mr-2 ml-auto">新增菜单</a-button>
            <a-button @click="getData" :loading="inLoading">刷新</a-button>
          </div>
          <use-n-progress :inanimate="inDebounce" />
          <a-table
            row-key="id"
            class="!h-0 flex-1"
            :scroll="{ y: '100%', x: '100%' }"
            :pagination="pagination"
            :data="dataList"
            :loading="inLoading"
            :row-selection="{
              type: 'checkbox',
              showCheckedAll: true,
              onlyCurrent: false, // false:切换页面时依旧可以选择   true:传统模式
            }"
            v-model:selected-keys="selectedKeys"
            v-on="handlePageChange"
            :columns="[
              // { title: 'ID', dataIndex: 'id', width: 170 },
              { title: '名称', dataIndex: 'name', width: 240 },
              { title: '路径', dataIndex: 'path', width: 170 },
              { title: '状态', slotName: 'status', width: 80 },
              { title: '备注', dataIndex: 'remark', width: 200 },
              { title: '操作', slotName: 'tools', width: 170, fixed: 'right' },
            ]"
          >
            <template #status="{ record }">
              <common-status-tag :value="record.status" />
            </template>
            <template #tools="{ record }">
              <a-button @click="handleOpenModal(record)" class="mr-2" title="编辑">
                <template #icon>
                  <Icon icon="ant-design:edit-twotone" />
                </template>
              </a-button>
              <a-button @click="handleDelete([record.id])" class="mr-2" title="删除">
                <template #icon>
                  <Icon icon="ant-design:delete-twotone" />
                </template>
              </a-button>
              <a-button v-if="record.children" @click="handleOpenModal({ belong: record.id })" title="添加子项">
                <template #icon>
                  <Icon icon="ant-design:plus-outline" />
                </template>
              </a-button>
              <!-- <a-button v-else status="warning" @click="handleVisibleAuthDetail(record.id)">
                <template #icon>
                  <Icon icon="ant-design:eye-outline" />
                </template>
              </a-button> -->
            </template>
          </a-table>
        </div>
      </template>
      <template #second>
        <a-typography-paragraph></a-typography-paragraph>
      </template>
    </a-split>
    <render-table-select-tool :del="handleDelete" :edit="(ids:any)=>handleOpenModal({ids})" />
    <!-- 编辑/新增菜单 -->
    <a-modal width="auto" v-model:visible="visible" title-align="start" draggable :on-before-ok="handleSubmit">
      <template #title>{{ isGroupEdit ? '批量编辑' : (formData.id ? '编辑' : '新增') + '菜单' }}</template>
      <a-form ref="editFormRef" auto-label-width :model="formData" :style="{ width: '480px' }">
        <a-form-item v-if="!isGroupEdit" field="name" label="名称" :rules="{ required: true, message: '名称必填！' }">
          <a-input v-model="formData.name" />
        </a-form-item>
        <a-form-item v-if="!isGroupEdit" field="type" label="类型" :rules="{ required: true, message: '类型必选！' }">
          <a-radio-group type="button" v-model="formData.type" :disabled="Boolean(formData.children?.length)">
            <a-radio value="sub-menu">菜单</a-radio>
            <a-radio value="menu-item">页面</a-radio>
          </a-radio-group>
          <template #extra>
            <div v-if="formData.children?.length">先删除/移走菜单下所有页面，才能修改为页面</div>
          </template>
        </a-form-item>
        <a-form-item
          v-if="!isGroupEdit && formData.type === 'menu-item'"
          field="path"
          label="路径"
          :rules="{ required: true, message: '页面路径必填！' }"
        >
          <a-input v-model="formData.path" />
        </a-form-item>
        <a-form-item
          v-if="!isGroupEdit"
          field="belong"
          label="上级"
          :rules="{ required: true, message: '上级菜单必选！' }"
        >
          <a-input v-model="formData.belong" />
        </a-form-item>
        <a-form-item field="status" label="启用">
          <a-switch
            v-model="formData.status"
            type="round"
            checked-text="启用"
            unchecked-text="隐藏"
            :checked-value="1"
            :unchecked-value="0"
          />
          <template v-if="isGroupEdit" #extra>
            <a-checkbox>提交</a-checkbox>
          </template>
        </a-form-item>
        <a-form-item field="sort" label="排序">
          <a-input-number v-model="formData.sort" />
          <template v-if="isGroupEdit" #extra>
            <a-checkbox>提交</a-checkbox>
          </template>
        </a-form-item>
        <a-form-item field="icon" label="图标">
          <a-input v-model="formData.icon" />
          <template #extra>
            <div>
              <a-link href="https://icon-sets.iconify.design/" target="_blank">点击这里</a-link>
              找一个图标，并copy到这里
            </div>
            <a-checkbox v-if="isGroupEdit">提交</a-checkbox>
          </template>
        </a-form-item>
        <a-form-item field="remark" label="备注">
          <a-textarea
            v-model="formData.remark"
            :auto-size="{
              minRows: 2,
              maxRows: 5,
            }"
          />
          <template v-if="isGroupEdit" #extra>
            <a-checkbox>提交</a-checkbox>
          </template>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="tsx" setup>
import { getMenuList } from 'api/test1'
import { cloneDeep } from 'lodash-es'

type IItem = Record<'id' | 'belong' | 'name' | 'type' | 'path' | 'icon' | 'remark', string> & {
  ids?: string[]
  children?: IItem[]
  status: boolean
  sort?: number
}

const DEFAULT_FORM: IItem = {
  id: '',
  ids: undefined,
  belong: '', // 归属于
  name: '',
  type: '', // 目录||页面
  path: '', // 路径
  status: false,
  sort: undefined,
  icon: '',
  remark: '',
  children: undefined,
}

const visible = ref(false)
const editFormRef = ref()
const formData = reactive(cloneDeep(DEFAULT_FORM))
const isGroupEdit = computed(() => Boolean(Number(formData.ids?.length) > 1))
const { selectedKeys, RenderTableSelectTool } = useTableSelect()
const { dataList, inDebounce, pagination, handlePageChange, inLoading, getData } = useGetData<any, {}>(
  getMenuList,
  {},
  {
    usePagination: false,
  },
)

async function handleDelete(ids: string[]) {
  await useConfirm()
  await getMenuList() // 模拟删除
  await getData()
}

async function handleOpenModal(row: any = {}) {
  Object.assign(formData, DEFAULT_FORM, row)
  editFormRef.value?.clearValidate()
  await nextTick()
  visible.value = true
}

async function handleSubmit() {
  const error = await editFormRef.value.validate()
  if (error) return false
  await getMenuList()
}
</script>
